import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
    Form,
    Input,
    Button,
    Radio,
    Select,
    InputNumber,
    Switch,
    Tag,
    message
} from 'antd';
import Title from '../../../../components/afterLoan/Title';
import { WarningAddAsyncAction, WarningUpdateAsyncAction, SetSpinningAction } from '../../../../store/afterLoanStore/action';
import { clearSpin } from '../../../../utils/afterLoanUtils';

const timer = null

export default function AddWarning({ location, history }) {
    const warningItem = useSelector(state => state.afterLoanStore.warningList.filter(item => {
        if (location.loanafter_warning_id) {
            return item.loanafter_warning_id === location.loanafter_warning_id
        } else {
            return false
        }
    }))
    console.log(warningItem);
    const dispatch = useDispatch()
    const validateMessages = {
        required: '${label}是必填项',
    }

    const [form] = Form.useForm()


    const onFinish = (values) => {
        values.loanafter_status = values.loanafter_status ? 1 : 0

        if (location.state === 1) {
            dispatch(SetSpinningAction(true))

            console.log("添加")
            dispatch(WarningAddAsyncAction(values))
                .then(res => {
                    message.success(res)
                    form.resetFields();
                })
                .catch(err => {
                    message.error('添加失败：', err)
                })
                .finally(() => {
                    clearSpin(timer, dispatch)
                })
        } else if (location.state === 3) {
            dispatch(SetSpinningAction(true))

            console.log("修改")

            dispatch(WarningUpdateAsyncAction({
                ...values,
                loanafter_warning_id: location.loanafter_warning_id
            }))
                .then(res => {
                    message.success("修改成功！")
                })
                .catch(err => {
                    message.error('修改失败：', err)
                })
                .finally(() => {
                    clearSpin(timer, dispatch)
                })
        }
    }

    const goBack = () => {
        history.goBack()
    }

    return (
        <div className='add-warning'>
            <Title isPrintBtn={true} goBack={history.goBack} title="添加贷后预警"></Title>
            <Form
                initialValues={{
                    warningName: location.state
                }}
                form={form}
                style={{
                    backgroundColor: '#fff',
                    paddingTop: 20,
                    paddingBottom: 20
                }}
                labelCol={{
                    span: 4,
                }}
                wrapperCol={{
                    span: 9,
                }}
                layout="horizontal"
                size='large'
                name="nest-messages"
                onFinish={onFinish}
                validateMessages={validateMessages}
            >
                <Form.Item label="预警名称" name='loanafter_warningname' initialValue={(warningItem.length && warningItem[0].loanafter_warningname) || null} rules={
                    [
                        {
                            required: true
                        }
                    ]
                }>
                    {(location.state === 2 && <Input disabled />) || (location.state === 3 && <Input placeholder='请为该预警定义一个名称' />) || <Input placeholder='请为该预警定义一个名称' />}
                </Form.Item>
                <Form.Item label="贷款类型">
                    <Input.Group compact>
                        <Form.Item name="loanafter_loantype" initialValue={(warningItem.length && warningItem[0].loanafter_loantype) || null}>
                            <Select style={{ minWidth: 100, marginRight: 10 }} placeholder="请选择" disabled={location.state === 2}>
                                <Select.Option value="1">loantype1</Select.Option>
                                <Select.Option value="2">loantype2</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name="loan_type2">
                            <Select style={{ minWidth: 100 }} placeholder="请选择" disabled={location.state === 2}>
                                <Select.Option value={1}>Demo1</Select.Option>
                            </Select>
                        </Form.Item>
                    </Input.Group>
                </Form.Item>
                <Form.Item label="贷款产品" name="loanafter_loanproduct" initialValue={(warningItem.length && warningItem[0].loanafter_loanproduct) || null}>
                    <Select placeholder="请选择" disabled={location.state === 2}>
                        <Select.Option value="1">product1</Select.Option>
                        <Select.Option value="2">product2</Select.Option>
                    </Select>
                </Form.Item>
                <Form.Item label="贷款五级分类" name="loanafter_group" initialValue={(warningItem.length && warningItem[0].loanafter_group) || null}>
                    <Select placeholder="请选择" disabled={location.state === 2}>
                        <Select.Option value={1}>category1</Select.Option>
                        <Select.Option value={2}>category2</Select.Option>
                    </Select>
                </Form.Item>
                <Form.Item label="预警阶段" name='loanafter_warningstage' initialValue={(warningItem.length && warningItem[0].loanafter_warningstage) || null} rules={
                    [
                        {
                            required: true
                        }
                    ]
                }>
                    <Select placeholder="选择预警阶段" disabled={location.state === 2}>
                        <Select.Option value={1}>stage1</Select.Option>
                        <Select.Option value={2}>stage2</Select.Option>
                    </Select>
                </Form.Item>
                <Form.Item label="提前预警天数" name="loanafter_beforewarningdate" initialValue={(warningItem.length && warningItem[0].loanafter_beforewarningdate) || null} rules={
                    [
                        {
                            required: true
                        }
                    ]
                }>
                    <InputNumber min={1} max={10} disabled={location.state === 2} />
                </Form.Item>
                <Form.Item label="预警周期" name='loanafter_warningperiod' initialValue={(warningItem.length && warningItem[0].loanafter_warningperiod) || null} rules={
                    [
                        {
                            required: true
                        }
                    ]
                }>
                    {/* onChange={onChange} value={value} */}
                    <Radio.Group disabled={location.state === 2}>
                        <Radio value={1}>一次</Radio>
                        <Radio value={2}>每天一次</Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item label="预警发送时间" name='loanafter_sendwarningtime' initialValue={(warningItem.length && warningItem[0].loanafter_sendwarningtime) || null} rules={
                    [
                        {
                            required: true
                        }
                    ]
                }>
                    {/* onChange={onChange} value={value} */}
                    <Radio.Group disabled={location.state === 2}>
                        <Radio value={'10:00'}>10:00</Radio>
                        <Radio value={'14:00'}>14:00</Radio>
                        <Radio value={'18:00'}>18:00</Radio>
                        <Radio value={'22:00'}>22:00</Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item label="接收成员" name='user_id' initialValue={(warningItem.length && warningItem[0].user_id) || null} rules={
                    [
                        {
                            required: true
                        }
                    ]
                }>

                    <Select placeholder="选择成员" disabled={location.state === 2}>
                        <Select.Option value={1}>小熊</Select.Option>
                        <Select.Option value={2}>小张</Select.Option>
                    </Select>
                    {/* onClose={log}*/}
                </Form.Item>
                {location.state === 2 ? null :
                    <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
                        <Tag closable>
                            小熊
                        </Tag>
                        <Tag closable>
                            小张
                        </Tag>
                    </Form.Item>}
                <Form.Item label="是否启用" name="loanafter_status" valuePropName='checked' initialValue={(warningItem.length && warningItem[0].loanafter_status) || null}>
                    <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked={false} disabled={location.state === 2} />
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
                    {location.state === 2 ? null :
                        <Button type="primary" htmlType="submit" size='default'>
                            提交
                        </Button>}
                    <Button type="default" size='default' style={location.state === 2 ? null : { marginLeft: 100 }} onClick={goBack}>
                        返回
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}
